<template>
  <div class="container">
    <div class="app-container">
      <el-tree :data="treeData" :props="defaultProps" default-expand-all :expand-on-click-node="false">

        <!-- template标签用于配合作用域插槽获取子组件数据 -->
        <template v-slot="{node, data}">
          <el-row type="flex" justify="space-between" align="middle" style="width: 100%;">
            <!-- 节点标签 -->
            <el-col>{{ node.label }}</el-col>
            <el-col :span="6" style="text-align: right;">
              <!-- 主管名称 -->
              <span style="margin-right: 20px;">{{ data.managerName }}</span>
              <!-- 下拉菜单 -->
              <el-dropdown @command="handleOperate($event, data.id)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <!-- 下拉菜单选项 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <!-- 添加部门组件 -->
      <addDept
        ref="addDept"
        :pid-taken="selectedPid"
        :dept-list="deptList"
        :dialog-visible.sync="showAddDept"
        @updateDepartment="getDepartmentList"
      />
    </div>
  </div>
</template>
<script>
import { getDepartmentList, deleteDepartment } from '@/api/department'
import addDept from './component/add-dept.vue'
import { transList2Tree } from '@/utils/date-handle'

export default {
  name: 'Department',
  components: { addDept },
  data() {
    return {
      treeData: [],
      showAddDept: false,
      defaultProps: {
        // 子节点数组（指向treeData中的children）
        children: 'children',
        // 节点标签（指向treeData中的name）
        label: 'name'
      },
      // 部门名称、编码列表，用于add-dept组件进行表单项校验
      deptList: [],
      // 选中要添加子部门的部门id，默认为跟部门
      selectedPid: 1
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    // 获取部门信息并转为树形结构
    async getDepartmentList() {
      const resData = await getDepartmentList()
      // 给部门名称、编码列表赋值
      this.deptList = resData
      // 将后台返回的部门信息转为树状结构
      this.treeData = transList2Tree(resData)
    },

    // 点击下拉菜单选项的回调函数
    async handleOperate(operate, nodeId) {
      this.selectedPid = nodeId
      if (operate === 'add') {
        // 新增子部门
        this.showAddDept = true
      } else if (operate === 'edit') {
        // 编辑部门
        this.showAddDept = true
        // 通知子组件获取部门详情并回显数据
        this.$refs.addDept.getDepartment(nodeId)
      } else {
        // 删除部门
        this.$confirm('您确定要删除此部门吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 删除子部门
          await deleteDepartment(nodeId)
          // 刷新数据
          this.getDepartmentList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }
    }
  }
}
</script>

<style scoped>
  .app-container {
    padding: 30px 150px;
  }
</style>
